<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>Zapatec DHTML Calendar</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" media="all" href="../themes/winxp.css" title="winxp" >
		<link href="../doc/css/zpcal.css" rel="stylesheet" type="text/css">
		<link href="../doc/css/template.css" rel="stylesheet" type="text/css">
		<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">


		<!-- import the calendar script -->
		<script type="text/javascript" src="../src/utils.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- import the language module -->
		<script type="text/javascript" src="../lang/calendar-en.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->

		<!-- import the calendar setup script -->
		<script type="text/javascript" src="../src/calendar-setup.js"></script>

		<style type="text/css">
			/*
			Define elements to show start/end dates and the dates in between
			*/

			/*
			* for start/end dates
			*/
			.edges {
				border : 1px solid;
				border-color: #adaa9c #fff #fff #adaa9c;
				background-color: #fffbee;
			}

			/*
			* for dates between start and end dates
			*/
			.between {
				background-color: #dccdb9;
			}

			.calendar tbody .disabled { text-decoration: line-through; color:#000}
		</style>
	</head>
	<body>
		<table class='zpStandard' width='800'> 
			<tr>
				<td>
					<div class="topMenuHeader">
						<div class="logo">
							<a href='http://www.zapatec.com'><img src='../doc/images/logoNew.gif' alt='Zapatec logo' border='0'></a>
						</div>
						<div class="btn1">
							<a href="https://www.zapatec.com/zadmin/buy.jsp"><img src="../doc/images/buttonBuy.png" alt='My Account' border="0"></a>                                                                                                                                                                 </div>
						<div class="btn1">
							<a href="http://www.zapatec.com/website/main/pricing.jsp"><img src="../doc/images/buttonPricing.png" alt='My Account' border="0"></a>
						</div>
					</div>

			<a href='example8.html' style='float:left; margin-left:2em; margin-top:.5em;'> <img border='0' src='previous.gif' alt='previous Javascript Calendar Example'></a>
			<a href='example9.html' style='float:right; margin-right:2em; margin-top:.5em;'><img border='0' src='next.gif' alt='previous Javascript Calendar Example'></a>

<div class='zpCalSubheader' style='text-align:center'> Two Coordinated Dates Highlight the Dates in Between</div>

  Like the previous example, simulates choosing <strong> check-in</strong> and <strong> check-out </strong> 
	dates for a hotel reservation, with the addition of highlighting the dates in between.

	<ol>
		<li> Click on a button. </li>
		<li> Electric is set to false, so the dates are not updated when you scroll forwards or backwords  in months and years </li>
		<li> Notice that you cannot choose days prior to today. </li>
		<li> You cannot choose a check in date later then the check out date. </li>
		<li> You cannot choose a check out date prior to the check in date. </li>
		<li> After choosing the check in date, it is highlighted in the check out calendar </li>
		<li> Clicking reset will clear the dates. </li>
		<li> The second calendar default date is the date chosen in the first calendar. This matters
		when the check in days is several months in the future so the user doesn't need to scroll twice</li>
		<li> After choosing both the check in date and the check out dates, the range between is highlighted</li>
		<li> Disabled, not clickable, dates are are strike through rather than faded dates </li>
	</ol>


	<form name="form1" action="#" method="POST" onReset='resetDates()'> 
		<table>
			<tr>
				<td class='zpCalSubheader'> 
					Location: 
				</td>
				<td>
					<input type="text" name="location" id="location" />
				</td>
			</tr>
			<tr>
				<td class='zpCalSubheader'> 
					Check-in Date:
				</td>
				<td>
					<input type="text" name="date8a" id="departure_date" />
					<input type="reset" value=" ... " id='button8a'>
				</td>
			</tr>
			<tr>
				<td class='zpCalSubheader'> 
					Check-out Date:
				</td>
				<td>
					<input type="text" name="date8b" id="arrivalDate" />
					<input type="reset" value=" ... " id='button8b'>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" name="Submit2" value="Check" class="button" onFocus="if(this.blur)this.blur()">
				</td>
				<td>

					<input type="reset" name="Submit22" value="Reset" class="button" onFocus="if(this.blur)this.blur()"> 
				</td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
		<!--  to hide script contents from old browsers
			var startDate;
			var endDate;
			var callbacks = 0;

			function resetDates() {
				startDate = endDate = null;
			}


			/*
			* Given two dates (in seconds) find out if date1 is bigger, date2 is bigger or
			 * they're the same, taking only the dates, not the time into account.
			 * In other words, different times on the same date returns equal.
			 * returns -1 for date1 bigger, 1 for date2 is bigger 0 for equal
			 */

			function compareDatesOnly(date1, date2) {
				var year1 = date1.getYear();
				var year2 = date2.getYear();
				var month1 = date1.getMonth();
				var month2 = date2.getMonth();
				var day1 = date1.getDate();
				var day2 = date2.getDate();

				if (year1 > year2) {
					return -1;
				}
				if (year2 > year1) {
					return 1;
				}

				//years are equal
				if (month1 > month2) {
					return -1;
				}
				if (month2 > month1) {
					return 1;
				}

				//years and months are equal
				if (day1 > day2) {
					return -1;
				}
				if (day2 > day1) {
					return 1;
				}

				//days are equal
				return 0;


				/* Can't do this because of timezone issues
				var days1 = Math.floor(date1.getTime()/Date.DAY);
				var days2 = Math.floor(date2.getTime()/Date.DAY);
				return (days1 - days2);
				*/
			}

			function filterDates1(cal) {
				startDate = cal.date;
				/* If they haven't chosen an 
				end date before we'll set it to the same date as the start date This
				way if the user scrolls in the start date 5 months forward, they don't
				need to do it again for the end date.
				*/

				if (endDate == null) { 
					Zapatec.Calendar.setup({
						inputField     :    "arrivalDate",
						button         :    "button8b",  // What will trigger the popup of the calendar
						ifFormat       :    "%Y-%m-%d ",
						timeFormat     :    "24",
						date           :     startDate,
						electric       :     false,
						showsTime      :     false,          //no time
						disableFunc    :    dateInRange2, //the function to call
						onUpdate       :    filterDates2
					});
				}
			}

			function filterDates2(cal) {
				endDate = cal.date;
			}

			/*
			* Both functions disable and hilight dates.
			*/
			
			/* 
			* Can't choose days after the
			* end date if it is choosen, hilights start and end dates with one style and dates between them with another
			*/
			function dateInRange1(date) {

				if (endDate != null) {

					// Disable dates after end date
					var compareEnd = compareDatesOnly(date, endDate);
					if  (compareEnd < 0) {
						return (true);
					}

					// Hilight end date with "edges" style
					if  (compareEnd == 0) {
						{return "edges";}
					}


					// Hilight inner dates with "between" style
					if (startDate != null){
						var compareStart = compareDatesOnly(date, startDate);
						if  (compareStart < 0) {
							return "between";
						} 
					} 
				}

				//disable days prior to today
				var today = new Date();
				var compareToday = compareDatesOnly(date, today);
				if (compareToday > 0) {
					return(true);
				}


				//all other days are enabled
				return false;
				//alert(ret + " " + today + ":" + date + ":" + compareToday + ":" + days1 + ":" + days2);
				return(ret);
			}

			/* 
			* Can't choose days before the
			* start date if it is choosen, hilights start and end dates with one style and dates between them with another
			*/

			function dateInRange2(date) {
				if (startDate != null) {
					// Disable dates before start date
					var compareDays = compareDatesOnly(startDate, date);
					if  (compareDays < 0) {
						return (true);
					}

					// Hilight end date with "edges" style
					if  (compareDays == 0) {
						{return "edges";}
					}

					// Hilight inner dates with "between" style
					if ((endDate != null) && (date > startDate) && (date < endDate)) {
						return "between";
					} 
				} 

				var now = new Date();
				if (compareDatesOnly(now, date) < 0) {
					return (true);
				}

				//all other days are enabled
				return false;
			}

			Zapatec.Calendar.setup({
				inputField     :    "departure_date",   // id of the input field
				button         :    "button8a",  // What will trigger the popup of the calendar
				ifFormat       :    "%Y-%m-%d ",       // format of the input field
				timeFormat     :    "24",
				showsTime      :     false,          //no time
				electric       :     false,
				dateStatusFunc :    dateInRange1, //the function to call
				onUpdate       :    filterDates1
			});
			Zapatec.Calendar.setup({
				inputField     :    "arrivalDate",
				button         :    "button8b",  // What will trigger the popup of the calendar
				ifFormat       :    "%Y-%m-%d ",
				timeFormat     :    "24",
				showsTime      :     false,          //no time
				electric       :     false,
				dateStatusFunc :    dateInRange2, //the function to call
				onUpdate       :    filterDates2
			});
			// end hiding contents from old browsers  -->

			var foo = new Date();
			var bar = new Date(foo - (Date.DAY + 5000));
	</script>
	<noscript>
		This page uses a <a href='http://www.zapatec.com/website/main/products/prod1/'> Javascript Calendar </a>, but
		your browser does not support Javascript. 
		<br/>
		Either enable Javascript in your Browser or upgrade to
		a newer version.
	</noscript>


	<div class="footer" style='text-align:center; margin-top:2em'>
		<br/>
		&copy; 2004 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
	</div>
			</td>
		</tr>
	</table>

</body>
</html>
